<style>
	.my-head-bar{
		display: flex;
		background: #B70A0C;
		color: #FFF;
	}
	.back-icon{
		width:25px;height: 25px;
		margin: 10px 2px;
		color: #fff; 
	}
	.mybar{
		flex: 1;
		height: 44px;
		line-height: 44px;
		text-align: center;
		font-size: 18px;
		padding-right: 25px;
	}
</style>
<template>
	<div class="chat-container">
	    <view class="my-head-bar">
	    	<image src="../../static/pages/image/back2.png" class="back-icon" @click="back()"></image>
	    	<view type="button" class="mybar">
	    		我的消息
	    	</view>
	    </view>
		<div v-if="allConversation.length === 0" class="empty">
			<view type="button" class="empty-view">
				没有新的消息
			</view>
		</div>
		<template v-for="(item,index) in allConversation">
			<div class="chat" v-if="item.type === 'C2C'" :key="item.conversationID" @longpress="longTimePress(item)"
				@click="checkoutConversation(item, item.userProfile.nick || item.userProfile.userID)">
				<div class="avatar-container">
					<image class="avatar" :src="item.userProfile.avatar || '/static/images/avatar.png'" mode=""></image>
					<!-- <i-avatar :src="item.userProfile.avatar || '/static/images/avatar.png'" i-class="avatar" /> -->
				</div>
				<div class="right">
					<div class="information">
						<div class="username">{{item.userProfile.nick || item.userProfile.userID}}</div>
						<div class="content" v-if="!item.lastMessage.isRevoked">
							<template v-if="item.lastMessage.payload.data == 'RemindShip'">
								提醒发货!!!
							</template>
							<template v-else>
								{{item.lastMessage.messageForShow}}
							</template>
						</div>
						<div class="content" v-else>
							<template v-if="myInfo.userID === item.lastMessage.fromAccount">你撤回了一条消息</template>
							<template v-else>{{item.lastMessage.fromAccount}}撤回了一条消息</template>
						</div>
					</div>
					<div class="time">
						<div class="last">{{item.lastMessage._lastTime}}</div>
						<div class="remain" v-if="item.unreadCount > 0">
							<span v-if="item.unreadCount > 99" class="info">99+</span>
							<span v-else class="info">{{item.unreadCount}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="chat" v-else-if="item.type === 'GROUP'"
				@click="checkoutConversation(item, item.groupProfile.name || item.groupProfile.ID)"
				:key="item.conversationID" @longpress="longTimePress(item)">
				<div class="avatar-container">
					<image class="avatar" :src="item.groupProfile.avatar" mode=""></image>
					<!-- <i-avatar :src="item.groupProfile.avatar" i-class="avatar" /> -->
				</div>
				<div class="right">
					<div class="information">
						<div class="username">{{item.groupProfile.name || item.groupProfile.groupID}}</div>
						<div class="content" v-if="!item.lastMessage.isRevoked">
							<template
								v-if="item.lastMessage.fromAccount === '@TIM#SYSTEM'">{{item.lastMessage.messageForShow}}</template>
							<template
								v-else>{{item.lastMessage.fromAccount}}：{{item.lastMessage.messageForShow}}</template>
						</div>
						<div class="content" v-else>
							<template v-if="myInfo.userID === item.lastMessage.fromAccount">你撤回了一条消息</template>
							<template v-else>{{item.lastMessage.fromAccount}}撤回了一条消息</template>
						</div>
					</div>
					<div class="time">
						<div class="last">{{item.lastMessage._lastTime}}</div>
						<div class="remain" v-if="item.unreadCount > 0">
							<span v-if="item.unreadCount > 99" class="info">99+</span>
							<span v-else class="info">{{item.unreadCount}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="chat" v-else-if="item.type === '@TIM#SYSTEM'" @click="checkoutNotification(item)"
				:key="item.conversationID" @longpress="longTimePress(item)">
				<div class="avatar-container">
					<image src="/static/images/system.png" class="avatar" />
				</div>
				<div class="right">
					<div class="information">
						<div class="username">系统通知</div>
						<div class="content">点击查看</div>
					</div>
					<div class="time">
						<div class="last"></div>
						<div class="remain" v-if="item.unreadCount > 0">
							<span v-if="item.unreadCount > 99" class="info">99+</span>
							<span v-else class="info">{{item.unreadCount}}</span>
						</div>
					</div>
				</div>
			</div>
			<view class="line" />
		</template>
		
		<view-tabbar :current="1"></view-tabbar>
	</div>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import {
		throttle
	} from '../../utils/index'
	import Tabbar from '@/pagesA/tabber/tabber.vue'
	export default {
		data() {
			return {
				modalVisible: false,
				conversation: {}
			}
		},
		components: {
			'view-tabbar': Tabbar,
		},
		computed: {
			...mapState({
				allConversation: state => state.conversation.allConversation,
				isSdkReady: state => state.global.isSdkReady
			}),
			...mapGetters(['totalUnreadCount', 'myInfo'])
		},
		// 消息列表下拉
		onPullDownRefresh() {
			throttle(wx.$app.getConversationList(), 1000)
			wx.stopPullDownRefresh()
		},
		methods: {
			back(){
				wx.navigateTo({
					url:'/pagesA/tabber/a'
				})
			},
			// 长按删除会话
			longTimePress(item) {
				this.conversation = item
				this.handleModalShow()
			},
			handleModalShow() {
				uni.showModal({
					title: '提示',
					content: '确认删除会话?',
					success: (res)=> {
						if (res.confirm) {
							this.handleConfirm()
						}
					}
				});
			},
			handleConfirm() {
				this.handleModalShow()
				this.deleteConversation(this.conversation)
			},
			// 将某会话设为已读
			setMessageRead(item) {
				if (item.unreadCount === 0) {
					return
				}
				wx.$app.setMessageRead({
					conversationID: item.conversationID
				})
			},
			// 点击某会话
			checkoutConversation(item, name) {
				this.$store.dispatch('checkoutConversation', item.conversationID)
			},
			// 点击系统通知时，处理notification
			checkoutNotification(item) {
				this.$store.commit('resetCurrentConversation')
				this.$store.commit('resetGroup')
				this.setMessageRead(item)
				wx.$app.getConversationProfile(item.conversationID)
					.then((res) => {
						this.$store.commit('updateCurrentConversation', res.data.conversation)
						this.$store.dispatch('getMessageList')
					})
				let url = '../system/main'
				wx.navigateTo({
					url
				})
			},
			// 删除会话
			deleteConversation(item) {
				console.log(item)
				// wx.$app.deleteConversation(item.conversationID).then((res) => {
				// 	console.log('delete success', res)
				// })
			},
			empty() {
				let url = '../search/main'
				wx.navigateTo({
					url
				})
			}
		},
		onLoad() {
			if (!this.isSdkReady) {
				wx.showLoading({
					title: '正在同步数据',
					mask: true
				})
			}
		},
		watch: {
			isSdkReady(newVal) {
				if (newVal) {
					wx.hideLoading()
				}
			}
		}
	}
</script>

<style lang="scss">
	.chat-container {
		background-color: #FFFFFF;
		min-height: 100vh;
		box-sizing: border-box;
		border-bottom: 1px solid #dbdbdb;

		.chat {
			background-color: #FFFFFF;
			box-sizing: border-box;
			display: flex;
			height: 72px;

			&:last-child .right {
				border-bottom: none;
			}

			.avatar-container {
				padding: 12px;
				box-sizing: border-box;

				.avatar {
					border-radius: 4px;
					height: 48px;
					width: 48px;
				}
			}
		}
	}

	.information {
		display: flex;
		flex-direction: column;
		padding-right: 10px;
		height: 48px;
		width: 60%;
		flex-grow: 1;
		
		.username {
			color: #111111;
			font-size: 18px;
			line-height: 28px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.content {
			color: #999999;
			font-size: 14px;
			overflow: hidden;
			line-height: 20px;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.right {
		padding: 12px 0;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		border-bottom: 1px solid #f1f1f1;
		width: calc(100% - 80px); // 80px 是头像框的宽度
		flex-grow: 1;
	}

	.time {
		padding-right: 16px;
		display: flex;
		flex-direction: column;
		flex-basis: 100px;
		text-align: right;

		.last {
			color: #999999;
			font-size: 12px;
			line-height: 28px;
		}
		
		.remain {
			display: flex;
			flex-direction: row-reverse;
		
			.info {
				color: #FFFFFF;
				font-size: 12px;
				background-color: #fb5250;
				border-radius: 30px;
				padding: 2px 7px 3px;
			}
		}
	}

	.empty {
		display: flex;
		align-content: center;
		justify-content: center;

		.empty-view {
			margin-top: 40vh;
			padding: 12px;
			text-align: center;
		}

		.empty-button {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 46px;
			color: #FFFFFF;
			margin-top: 40vh;
			padding: 12px;
			background-color: #006fff;
			border-radius: 6px;
			font-size: 18px;
			width: 80vw;

			&:before {
				content: '';
				font-size: 22px;
				margin-right: 12px;
			}
		}
	}

	.input {
		text-align: center;
		height: 32px;
		background-color: #FFFFFF;
		border-radius: 8px;
		font-size: 16px;
	}

	.content-red {
		color: #fb5250;
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 80%;
	}

	.delete {
		color: #FFFFFF;
		font-size: 14px;
		font-weight: 600;
		background-color: #fb5250;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.delete-button {
		text-align: center;
	}

	.line {
		width: 100%;
		height: 2upx;
		background-color: #ebedf0;
	}
</style>
